<template>
    <div class="trans">
        <div class="trans1">
            <div class="trans2" v-for="item in tagList" v-bind:key="item" @click="goTo(item.path)">
                <img :src="item.img" alt="" class="trans3">
                <div class="trans4">{{ item.title }}</div>
            </div>
        </div>


        <div class="trans5">
            <div class="trans6">
                <div class="trans7">
                    <RadioSelect v-if="isLoad" :selectList="orgTreeList" searchKey="orgIds" isShowTitle @returnData="setData" isRange2>
                    </RadioSelect>
                </div>
                <div class="trans8">{{ $t('text.Contract.l4') }}:&ensp;{{ peopleList.upTime }}</div>
            </div>
            <div class="trans9">
                <div class="trans10">
                    <div class="trans11">
                        <div class="trans12">{{ $t('text.Employee.l120') }}</div>
                        <div class="trans13"></div>
                        <div class="trans13"></div>
                    </div>
                    <div class="trans14">
                        <div class="trans15">
                            <div class="trans16">{{ peopleList.c1 }}</div>
                            <div class="trans17">{{ $t('text.Employee.l109') }}</div>
                        </div>
                        <div class="trans15">
                            <div class="trans16">{{ peopleList.c2 }}</div>
                            <div class="trans17">{{ $t('text.Employee.l110') }}</div>
                        </div>
                        <div class="trans15">
                            <div class="trans16">{{ peopleList.c3 }}</div>
                            <div class="trans17">{{ $t('text.Employee.l111') }}</div>
                        </div>
                    </div>
                </div>

                <div class="trans10">
                    <div class="trans11">
                        <div class="trans122">{{ $t('text.Employee.l121') }}</div>
                        <div class="trans13"></div>
                        <div class="trans13"></div>
                    </div>
                    <div class="trans14">
                        <div class="trans15">
                            <div class="trans16">{{ peopleList.c4 }}</div>
                            <div class="trans17">{{ $t('text.Employee.l112') }}</div>
                        </div>
                        <div class="trans15">
                            <div class="trans16">{{ peopleList.c5 }}</div>
                            <div class="trans17">{{ $t('text.Employee.l113') }}</div>
                        </div>
                        <div class="trans15">
                            <div class="trans16">{{ peopleList.c6 }}</div>
                            <div class="trans17">{{ $t('text.Employee.l114') }}</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
    
<script>

import RadioSelect from '@/components/select/RadioSelect.vue';
import { orgTreeNoUser, userUserCount } from '../../http/api';

export default {
    name: 'EmployeeManage',
    components: {
        RadioSelect
    },
    props: {
    },
    data() {
        return {
            tagList: [
                { title: this.$t('text.Employee.l15'), img: require('../../assets/images/h29.svg'), path: '/department' },
                { title: this.$t('text.Employee.l16'), img: require('../../assets/images/h30.svg'), path: '/employeeManage' },
                { title: this.$t('text.Employee.l10'), img: require('../../assets/images/h31.svg'), path: '/employeeDynamics' },
                { title: this.$t('text.Employee.l12'), img: require('../../assets/images/h32.svg'), path: '/employeeCare' },
                { title: this.$t('text.Employee.l11'), img: require('../../assets/images/h33.svg'), path: '/loginLog' },
            ],
            orgTreeList: [],
            peopleList: [],
            searchData: {},
            isLoad: false
        }
    },
    mounted() {
        userUserCount(this.searchData).then(res => {
            if (res !== undefined) {
                this.peopleList = res
                console.log(res)
            }
        }).catch()
        orgTreeNoUser().then(res => {
            if (res !== undefined) {
                this.orgTreeList = res
                this.isLoad = true
                console.log(res)
            }
        }).catch()
    },
    methods: {
        setData(obj) {
            this.searchData = { ...this.searchData, ...obj }
            userUserCount(this.searchData).then(res => {
                if (res !== undefined) {
                    this.peopleList = res
                    console.log(res)
                }
            }).catch()
        },
        //格式化时间
        timeFormat() {
            var time = new Date();
            time.setDate(time.getDate() - 1); // 减去1天，获取昨天的日期
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            let res = y + '-' + this.add0(m) + '-' + this.add0(d) + ' 00:00:00'
            return res;
        },
        add0(m) {
            return m < 10 ? '0' + m : m
        },
        goTo(path) {
            this.$router.push(path)
        }
    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
.trans {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f8fa;
}

.trans1 {
    display: flex;
    margin-top: 50px;
    width: 80%;
}

.trans2 {
    flex: 1;
    background: white;
    display: flex;
    align-items: center;
    padding: 20px;
    margin-right: 20px;
    box-shadow: 0px 3px 5px 2px #e9e9e9;
}

.trans2:last-child {
    margin: 0;
}

.trans3 {
    width: 40px;
    height: 40px;
}

.trans4 {
    font-weight: 600;
    font-size: 15px;
    padding-left: 10px;
    white-space: nowrap;
}

.trans5 {
    background: white;
    white-space: nowrap;
    width: 80%;
    margin-top: 40px;
    box-shadow: 0px 3px 5px 2px #e9e9e9;
}

.trans6 {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
}

.trans7 {
    font-size: 13px;
}

.trans8 {
    font-size: 13px;
}

.trans9 {
    display: flex;
    padding: 30px 20px;
    font-weight: 600;
    font-size: 15px;
}

.trans10 {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-right: 20px;
    padding-left: 20px;
    border-right: 2px solid #eee;
}

.trans10:first-child {
    padding-left: 0px;
}

.trans10:last-child {
    padding-right: 0px;
    border: none;
}

.trans11 {
    display: flex;
    padding-bottom: 20px;
}

.trans12 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trans12::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #1b4fd9;
    margin-right: 5px;
}

.trans122 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trans122::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #fa5300;
    margin-right: 5px;
}

.trans1222 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trans1222::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #02cc85;
    margin-right: 5px;
}

.trans13 {
    flex: 1;
    color: #f76c74;
}

.trans14 {
    display: flex;
}

.trans15 {
    flex: 1;
}

.trans16 {
    font-size: 13px;
}

.trans17 {
    font-weight: 500;
    padding-top: 5px;
}</style>